<script setup lang="ts">
import { ref, watch } from 'vue'
import { useScrollEvent } from '@/utils/hooks/scrollEvent'
import { throttle } from '@/utils'
import ProductItemCard from '../product/ProductItemCard.vue'

const { docBottomSide, dpr } = useScrollEvent()

let num = ref(10)

const loadData = throttle(() => {
  console.log('开始加载')
  setTimeout(() => {
    num.value += 10
  }, 200)
}, 1000)

watch(docBottomSide, (val, oldVal) => {
  // 优化：还需要加上正在加载中时 再次触发loadData不执行
  if (oldVal >= val && docBottomSide.value / dpr.value <= 400) {
    loadData()
  }
})

</script>
<template>
  <div class="water-fall-container">
    <div class="column-container">
      <div class="default-swipe">
        <!-- 为首页左侧轮播的预留位 -->
        <div class="product-first-item">
          <img v-lazy="'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'">
        </div>
      </div>
      <ProductItemCard v-for="item in num/2" :key="item" />
    </div>
    <div class="column-container">
      <!-- 右侧轮播 -->
      <transition name='slide-fade' v-for="item in num/2" :key="item">
        <ProductItemCard />
      </transition>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.water-fall-container {
  margin: 12px 15px 0;
  padding-bottom: 120px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  .column-container {
    max-width: 50%;
    flex: 1 1 0;
    margin: 7.5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    > div {
      margin-bottom: 15px;
    }
  }
}
.product-first-item {
  border-radius: var(--size-border-radius);
  // border: 1px solid;
  background-color: var(--vt-c-white);
  img {
    display: block;
    border-radius: var(--size-border-radius);
    width: 100%;
    object-fit: cover;
  }
}
</style>
